<template>
  <div class="w-[300px] border border-solid border-[#07c160] border-[1px]">
    <Editor
      style="height: 200px; overflow-y: hidden"
      v-model="editorSet.value"
      :defaultConfig="editorSet.editorConfig"
      mode="simple"
      @on-created="handleCreated"
      @on-change="onChange"
    />
  </div>
</template>

<script setup lang="ts">
import { Editor } from "@wangeditor/editor-for-vue";
import { IDomEditor, IEditorConfig } from "@wangeditor/editor";
import "@wangeditor/editor/dist/css/style.css";
import { reactive, shallowRef, onBeforeUnmount } from "vue";

const editorRef = shallowRef();

interface EditorSet {
  value: string;
  editorConfig: Partial<IEditorConfig>;
}

const editorSet = reactive<EditorSet>({
  value: "",
  editorConfig: {}
});

// 编辑器变化时
const emits = defineEmits(["update:text"]);
const onChange = (editor: IDomEditor) => {
  emits("update:text", editor.getHtml());
};

const handleCreated = (editor: any) => {
  editorRef.value = editor;
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  if (!editorRef.value) return;
  editorRef.value.destroy();
});
</script>

<style></style>
